<template>
   <Sidebar ref="sidebar" :title="$t('message.text.theme')">
    <div class="themeList">
      <div
        class="themeItem"
        v-for="item in themeList"
        :key="item.value"
        @click="useTheme(item)"
        :class="{ active: item.value === theme }"
      >
        <div class="imgBox">
          <img :src="item.img" alt="" />
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </Sidebar>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  nextTick
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
import Sidebar from "./Sidebar.vue";
import { themeList } from "./utils/constant";
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  mindMap: {
    type: Object,
  },
  activeSidebar:String
})

const sidebar = ref()
const theme = ref('')
watch(()=>props.activeSidebar,(val)=>{
  if (val === 'theme') {
    theme.value = props.mindMap.getTheme()
    sidebar.value.show = true
  } else {
    sidebar.value.show = false
  }
})
onMounted(()=>{
  proxy.$eventBus.$on("showTheme", () => {
    sidebar.value.show = false;
    nextTick(() => {
      theme.value = props.mindMap.getTheme();
      sidebar.value.show = true;
    });
  });
})

function useTheme(theme) {
  theme.value = theme.value;
  props.mindMap.setTheme(theme.value);
}

</script>
<style lang="scss" scoped>
.themeList {
  padding: 20px;

  .themeItem {
    width: 100%;
    cursor: pointer;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 20px;
    padding-bottom: 20px;
    transition: all 0.2s;
    border: 1px solid transparent;

    &:last-of-type {
      border: none;
    }

    &:hover {
      box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
        0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
    }

    &.active {
      border: 1px solid #67c23a;
    }

    .imgBox {
      width: 100%;

      img {
        width: 100%;
      }
    }
    .name {
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>